<template>
    <el-row justify="end">
        <el-pagination
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                background
                layout="slot, prev, pager, next"
                :total="total"
                pager-count="5"
                class="mt-3"
        >
            <!--  slot 只起占位作用，这里还应有了element的中文环境   -->
            <div class="hidden-xs-only">
                <div class="d-flex">
                <span>共{{total}}条&nbsp;&nbsp;</span>
                <el-select v-model="pageSize">
                    <el-option
                            v-for="item in pages"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
                </div>
            </div>

        </el-pagination>
    </el-row>
</template>

<script lang="ts">
    import {defineComponent, ref, watch} from 'vue'
    import {useStore} from 'vuex'

    export default defineComponent({
        name: "Pagination",
        props: {total: Number},
        setup() {
            const currentPage = ref(1)
            const pageSize = ref('10条/页')
            const pages = [
                {value: '10', label: '10条/页'},
                {value: '20', label: '20条/页'},
                {value: '50', label: '50条/页'},
                {value: '100', label: '100条/页'},
            ]

            const store = useStore()
            watch([currentPage, pageSize], (val) => {
                console.log(currentPage)
                console.log(pageSize)
                console.log(val)
                console.log(store)
                //store.commit('setPage', val);
            })

            return {currentPage, pageSize, pages}
        }
    })
</script>

<style scoped>
    >>> .el-pagination .el-select .el-input {
        width: 100px;
    }

    >>> .el-pagination.is-background .el-pager li {
        margin: 0 3px;
    }
</style>